<template>
	<el-form label-width="150px" :rules="rules" :model="formData" ref="elFormRef">
		<el-form-item label="考试名称: " prop="examName">
			<el-input v-model="formData.examName" maxlength="64" show-word-limit></el-input>
		</el-form-item>
		<!-- <el-form-item label="封面照片: " prop="coverImg" ref="coverImgRef">
			<fortress-upload type="image" name="coverImg" :formData="formData"></fortress-upload>
			<resource-select
				modelName="formData.coverImg"
				type="image"
				v-if="!formData.coverImg"
				@choosed="resourceChoosed"
			></resource-select>
		</el-form-item> -->
		<el-form-item label="考试有效期: " prop="examStartTime">
			<el-date-picker
				v-model="examTime"
				type="datetimerange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				value-format="yyyy-MM-dd HH:mm:ss"
			></el-date-picker>
		</el-form-item>
		<el-form-item label="答题时长: " prop="examTime">
			<el-input-number :min="1" :step="1" :precision="0" v-model="formData.examTime"></el-input-number>
			分钟
		</el-form-item>
		<el-form-item label="合格分: " prop="qualifiedScore">
			<el-input-number
				:min="0"
				:step="1"
				:precision="0"
				:max="formData.totalScore"
				v-model="formData.qualifiedScore"
			></el-input-number>
			分
			<span class="red">当前试卷总分：{{ formData.totalScore }} 分</span>
		</el-form-item>
		<el-form-item label="考试说明: " prop="examExplain">
			<el-input v-model="formData.examExplain" type="textarea" maxlength="300" show-word-limit></el-input>
		</el-form-item>
		<el-form-item label="是否限制考试次数: " prop="isLimited">
			<el-radio-group v-model="formData.isLimited">
				<el-radio :label="2">不限制</el-radio>
				<el-radio :label="1">限制</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="考试次数: " prop="examNum" v-if="formData.isLimited == 1">
			<el-select v-model="formData.examNum">
				<el-option :value="1"></el-option>
				<el-option :value="2"></el-option>
				<el-option :value="3"></el-option>
				<el-option :value="4"></el-option>
				<el-option :value="5"></el-option>
				<el-option :value="6"></el-option>
				<el-option :value="7"></el-option>
				<el-option :value="8"></el-option>
				<el-option :value="9"></el-option>
				<el-option :value="10"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="交卷后是否显示答案: " prop="showAnswerTime">
			<el-radio-group v-model="formData.showAnswerTime">
				<el-radio :label="2">不显示</el-radio>
				<el-radio :label="1">显示</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="考试提醒: " prop="isRemind">
			<el-radio-group v-model="formData.isRemind">
				<el-radio :label="2">不提醒</el-radio>
				<el-radio :label="1">开启提醒</el-radio>
			</el-radio-group>
		</el-form-item>
		<template v-if="formData.isRemind == 1">
			<el-form-item label="考试开始前: " prop="startRemind">
				<el-input-number :min="0" v-model="formData.startRemind"></el-input-number>
				分钟
			</el-form-item>
			<el-form-item label="考试结束前: " prop="endRemind">
				<el-input-number :min="0" v-model="formData.endRemind"></el-input-number>
				分钟
				<span class="tip">（仅对未参加考试人员）</span>
			</el-form-item>
		</template>
		<!-- <el-form-item label="开始时推送消息: " prop="pushMessage">
			<el-radio-group v-model="formData.pushMessage">
				<el-radio :label="1">开始时推送消息提醒</el-radio>
				<el-radio :label="2">不推送消息仅开始</el-radio>
			</el-radio-group>
		</el-form-item> -->
		<el-form-item label="试卷可见范围" prop="memberAuthorityDto" ref="memberAuthorityDtoFormItemRef">
			<userSelect v-model="memberAuthorityDto" @change="onUserSelectChange"></userSelect>
		</el-form-item>
		<el-form-item>
			<el-checkbox v-model="quartzTime">定时发布</el-checkbox>
		</el-form-item>
		<el-form-item prop="quartzTime" v-if="quartzTime" label="定时发布时间">
			<el-date-picker
				v-model="formData.quartzTime"
				format="yyyy-MM-dd HH:mm:ss"
				value-format="yyyy-MM-dd HH:mm:ss"
				type="datetime"
				placeholder="定时发布时间"
			></el-date-picker>
		</el-form-item>
	</el-form>
</template>

<script>
// import ResourceSelect from "@/components/resource-select.vue"

export default {
	props: {
		formData: {},
		isQuartzTime: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			rules: {
				examName: [{ required: true, message: "请输入考试名称", trigger: "change" }],
				// coverImg: [{ required: true, message: "请上传封面图", trigger: "change" }],
				examStartTime: [{ required: true, message: "请选择考试开始时间", trigger: "change" }],
				examTime: [{ required: true, message: "请输入考试时长", trigger: "change" }],
				qualifiedScore: [{ required: true, message: "请输入合格分", trigger: "change" }],
				endRemind: [{ required: true, message: "请输入考试结束前提醒时间", trigger: "change" }],
				memberAuthorityDto: [
					{
						required: true,
						message: "请选择试卷可见范围",
						trigger: "change",
						validator: (rule, value, callback) => {
							if (!this.formData.memberAuthorityDto) {
								callback(new Error("请选择试卷可见范围"))
								return
							}

							if (
								this.formData.memberAuthorityDto.member.length == 0 &&
								this.formData.memberAuthorityDto.userGroup.length == 0
							) {
								callback(new Error("请选择试卷可见范围"))
								return
							}
							callback()
						},
					},
				],
			},
		}
	},
	computed: {
		memberAuthorityDto: {
			get() {
				return this.formData.memberAuthorityDto || {}
			},
			set(value) {
				if (value) {
					this.formData.memberAuthorityDto = value
					// this.formData.memberAuthorityDto = {
					// 	memberId: value.member.map(item => item.id).join(","),
					// 	groupId: value.userGroup.map(item => item.id).join(","),
					// }
				}
			},
		},
		examTime: {
			get() {
				if (this.formData.examStartTime) {
					return [this.formData.examStartTime, this.formData.examEndTime]
				}
				return []
			},
			set(val) {
				if (val) {
					this.formData.examStartTime = val[0]
					this.formData.examEndTime = val[1]
				} else {
					this.formData.examStartTime = ""
					this.formData.examEndTime = ""
				}
			},
		},
		quartzTime: {
			get() {
				return this.isQuartzTime
			},
			set(val) {
				this.$emit("update:isQuartzTime", val)
			},
		},
	},
	methods: {
		resourceChoosed(obj, model, multiple) {
			if (obj.ossPlatform == 1) {
				obj.resourceUrl = this.$store.state.prefixUrl + obj.resourceUrl
			}
			let d = model.split(".")
			if (d.length == 1) {
				if (multiple) {
					if (!this[model]) {
						this[model] = []
					}
					this.$nextTick(() => {
						this[model].push(obj.resourceUrl)
					})
				} else {
					this[model] = obj.resourceUrl
				}
			} else if (d.length == 2) {
				if (multiple) {
					if (!this[d[0]][d[1]]) {
						this[d[0]][d[1]] = []
					}
					this.$nextTick(() => {
						this[d[0]][d[1]].push(obj.resourceUrl)
					})
				} else {
					this[d[0]][d[1]] = obj.resourceUrl
				}
			} else if (d.length == 3) {
				if (multiple) {
					if (!this[d[0]][d[1]][d[2]]) {
						this[d[0]][d[1]][d[2]] = []
					}
					this.$nextTick(() => {
						this[d[0]][d[1]][d[2]].push(obj.resourceUrl)
					})
				} else {
					this[d[0]][d[1]][d[2]] = obj.resourceUrl
				}
			}

			this.$refs.coverImgRef.clearValidate()
		},

		onUserSelectChange() {
			this.$nextTick(() => {
				this.$refs.memberAuthorityDtoFormItemRef.clearValidate()
			})
		},
	},
	components: {
		// ResourceSelect,
	},
}
</script>

<style lang="scss" scoped>
.red {
	color: red;
}
.tip {
	color: #ccc;
}
</style>
